<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>标签列表</span>
                <el-button icon="CirclePlus" type="primary" plain>添加标签</el-button>
            </div>
        </template>
        <el-table style="width:100%">
            <el-table-column prop="id" label="#" />
            <el-table-column prop="name" label="标签名称" />
            <el-table-column prop="操作">
                <div class="btns">
                    <el-button icon="EditPen" type="primary" plain>编辑</el-button>
                    <el-button icon="Delete" type="danger" plain @click="handleRemove(scope.row.id,scope.$index)">删除
                    </el-button>
                </div>
            </el-table-column>
        </el-table>
    </el-card>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
import Admin from '@/api/admin';
import { ref } from 'vue';
let tableData = ref([]);
// 加载列表
async function loadList() {
    let { status, msg, total, data } = await Admin.list();
    if (Status) {
        tableData.value = data;
    }
}
loadList();

// 删除操作
function handleRemove(id, i) {
// confirm弹窗
ElMessageBox.confirm(
    "确定要删除此账户吗?",
    '确认删除',{type:'error',cancelButtonText:'取消',confirmButtonText:'确认'}
    // 确认
    .then(async ()=>{
        //  1、ajax，将删除的那个id传入进来
        let {status,msg} = await Admin.remove({id});
        if(status){
            // 删除成功
            ElMessage.success(msg);
            // 操作DOM
            tableData.value.splice(i,1);
        }else{
            // 删除失败
            ElMessage.error(msg);
        }
    })
    .catch(()=>{
        // 取消
        ElMessage('取消成功');
    })
)
}
</script>

<style lang='less' scoped>
.el-image{
    width:60px;
    height:45px;
    border-radius:3px;
}
.card-header{
    display:flex;
    justify-content:space-between;
}

.btns{
    display:flex;
    justify-content:flex-start;
}

.el-card{
    height:85px;
}
</style>
